<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>


<div id="app">
  <input type="button" id="" value="get请求" @click="getinfo" />
  <input type="button" id="" value="post请求" @click="postinfo" />
  <input type="button" id="" value="jsonp请求" @click="jsonpinfo" />
  <p>{{info}}</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      info: ''
    },
    methods: {
      // 普通函数写法
      // getinfo() {
      //   this.$http.get('http://ip-api.com/json').then(function (res) {
      //     this.info = res.body.regionName;
      //   })
      // },
      //箭头函数写法
      getinfo() {
        this.$http.get('http://ip-api.com/json').then(res => {
          console.log(res)
          this.info = res;
        })
      },
      postinfo() {
        this.$http.post('http://ip-api.com/json', {}, {
          emulateJSON: true
        }).then(res => {
          console.log(res)
          this.info = res;
        })
      },
      jsonpinfo() {
        this.$http.jsonp('http://ip-api.com/json').then(res => {
          this.info = res;
          console.log(res)
          console.log(res.statusText)
        })
      }
    }
  })
</script>